<html>
<head>
  <title>设备管理系统 - GDMS</title>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8">
  <script type="text/javascript" src="src/js/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="src/js/layui/layui.js"></script>
  <script type="text/javascript" src="src/js/common.js"></script>
  
  <link rel="stylesheet" type="text/css" href="src/js//layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="src/css/account.css">
</head>
<body>

<div class="info" style="display:none;">
  <span>提示：XXX</span>
</div>

<div class="wrap">
  <div class="subwrap">
    <div class="content">  
      <div class="layui-row">
        <div class="title"><span lang="设备管理系统">设备管理系统</span></div>
        <div class="title2">Global Device Management System</div>
        <div class="switch-wrap">
          <div class="switch-button-wrap">
            <span class="switch-button" id="signup"><span lang="注册">注册</span></span>
            <span class="switch-button active" id="signin"><span lang="登录">登录</span></span>
            <span class="switch-button-bottom"></span>
          </div>
        </div>
      </div>
      <div class="layui-row tab-signin">
        <div class="group-inputs">
          <div class="account input-wrapper">
            <input name="username" placeholder="账号" type="text" class="input-top">
          </div>
          <div class="verification input-wrapper">
            <input name="password" placeholder="密码" type="password" class="input-bottom">
          </div>
        </div>
        <div class="signin-button"><span lang="登录">登录</span></div>
      </div>
      
      <div class="layui-row tab-signup">
        <div class="group-inputs">
          <div class="account input-wrapper">
            <input name="username" placeholder="账号" type="text" class="input-top">
          </div>
          <div class="verification input-wrapper">
            <input name="password" placeholder="密码" type="password">
          </div>
          <div class="verification input-wrapper">
            <input name="password2" placeholder="确认密码 CONFIRM PASS" type="password" class="input-bottom">
          </div>
        </div>
        <div class="signup-button"><span lang="暂未开放">暂未开放</span></div>
      </div>
      
      
      <div class="layui-row">
        <div class="lang">
          <div class="lang-title">Language</div>
          <form class="layui-form" action="">
            <div class="layui-form-item">
                <select name="lang" lay-verify="required" lay-filter="lang">
                  <option value="CN">中文</option>
                  <option value="EN">English</option>
                </select>
            </div>
          </form>
        </div>
      </div>
      <div class="layui-row footer">
        <div class="footer-line">© 2018 Bingzhe MIT License</div>
      </div>
    </div>
  </div>
</div>  

  
</body>
</html>
<script type="text/javascript">
//初始化语言
localStorage.lang = 'CN';

layui.use('form', function(){
  var form = layui.form;
  
  form.on('select(lang)', function(data){
    lang = data.value;
    localStorage.lang = lang;
    initLang('account',lang);
  });

  function initLang(pageName,lang){
    ajax=$.ajax({
      url:"api/LoginLang",
      type: 'post',
      async:true,
      data: {"pageName":pageName,"lang":lang},
      success:function(res){
        for(var i in res.data){
          $('span[lang="'+i+'"]').html(res.data[i]);
        }
        $('input[name="username"]').attr('placeholder',res.data['账号']) ;
        $('input[name="password"]').attr('placeholder',res.data['密码']) ;
        $('input[name="password2"]').attr('placeholder',res.data['确认密码']) ;
       
      },
      error:function (e) {
        var errMsg = 'Error';
        if(e.status){errMsg = errMsg +'(' + e.status + ')';}
        layer.msg(errMsg, {
          icon: 3,
          time: 1500 //1.5秒关闭
        }, function(){
          $('input[name="username"]').val('');
          $('input[name="password"]').val('');
        });
      }
    });
  }
  var langNow = 'CN';
  initLang('account',langNow);
  $('select[name="lang"]').val(langNow);
  form.render();
});

//全局回车事件
$(function(){
	document.onkeydown = function(e){
		password = $('#password').val();
		//判断按回车且密码输入框有值时才触发登录事件。
		if(e.keyCode==13&password!=""){
			login();
		}
	}
});   

//登录按钮点击事件
$('.signin-button').click(function(){
  login();
});

//输入框点击事件
$('.group-inputs input').click(function(){
  $(this).css('background-color','#fff');
});

//登录函数
function login(){
  lang = $('select[name="lang"]').val();
  username = $('input[name="username"]').val();
  password = $('input[name="password"]').val();
  if(username==''){
    $('.tab-signin input[name="username"]').css('background-color','#FF9999');
  }
  if(password==''){
    $('.tab-signin input[name="password"]').css('background-color','#FF9999');
  }
  if(username!=''&&password!=''){
    ajax = $.ajax({
      url:"api/Login",
      async:false,
      type: 'post',
      data: {"username":username,"password":password},
      success:function(res){
        if(res.code==0){
          sessionStorage.access_token = res.data.access_token;
          sessionStorage.userid = res.data.userid;
          sessionStorage.username = res.data.username;
          sessionStorage.role = res.data.role;
          sessionStorage.joindate = res.data.joindate;
          window.location.href = rootpath+"/";
        }else if(res.code==1){
          layer.msg(res.msg, {
            icon: 2,
            time: 1500 //1.5秒关闭
          }, function(){
            $('input[name="username"]').val('');
            $('input[name="password"]').val('');
          });   
        }else{
          layer.msg(res, {
            icon: 3,
            time: 1500 //1.5秒关闭
          }, function(){
            $('input[name="username"]').val('');
            $('input[name="password"]').val('');
          });
        }
      },
      error:function (e) {
        layer.msg(e.responseJSON.ExceptionMessage, {
          icon: 3,
          time: 1500 //1.5秒关闭
        }, function(){
          $('input[name="username"]').val('');
          $('input[name="password"]').val('');
        });
      }
    });
  }

}

$('.switch-button').click(function(){
  var self = $(this);
  if(self.hasClass('active')){
  }else{
    $('.switch-button').removeClass('active');
    self.addClass('active');
    if($('.switch-button-bottom').css('left')=='77px'){
      $('.switch-button-bottom').css('left','0px');
    }else{
      $('.switch-button-bottom').css('left','77px');
    }
    if(self.attr('id')=='signin'){
      $('.tab-signin').show();
      $('.tab-signup').hide();
    }else{
      $('.tab-signin').hide();
      $('.tab-signup').show();
    }
  }
});

</script>

